<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态渲染数据</title>
</head>
<body>
    <table border="1">
        <caption>商品列表</caption>
        <tr>
            <th>商品标题</th>
            <th>商品价格</th>
            <th>商品库存</th>
        </tr>
    </table>

    <script>
        let productArr=[
          {title:'华为Mate60',price:8000,num:200},
          {title:'小米14',price:5000,num:1000},
          {title:'苹果15',price:10000,num:800},
          {title:'OPOO Reano11',price:2999,num:10}
        ]
        for (let i=0;i<productArr.length;i++){
            let tr = document.createElement("tr");
            let title = document.createElement("td");
            let price = document.createElement("td");
            let num = document.createElement("td");
            title.innerHTML=productArr[i].title;
            price.innerHTML=productArr[i].price;
            num.innerHTML=productArr[i].num;
            tr.append(title,price,num);
            let table = document.querySelector("table");
            table.append(tr);
        }
    </script>
</body>
</html>